<template>
  <div class="box">
    <div class="box_top">
      <!-- 艺人 -->
      <div class="artists">
        <div class="section-title">
          <h1>艺人</h1>
          <span>显示全部</span>
        </div>
        <div class="left_max">
          <div v-for="item in singer" :key="item" class="geDan">
            <div class="imgs">
              <i class="iconfont icon-24gf-playCircle" />
              <img :src="item.picUrl">
            </div>
            <div class="introduce">
              <div class="name_top">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 艺人 -->

      <!-- 专辑 -->
      <div class="albums">
        <div class="section-title">
          <h1>专辑</h1>
          <span>显示全部</span>
        </div>
        <div class="right_max">
          <div v-for="item in albums" :key="item.id" class="geDan">
            <div class="imgs">
              <i class="iconfont icon-24gf-playCircle" />
              <img :src="item.picUrl">
            </div>
            <div class="introduce">
              <div class="name_top">{{ item.name }}</div>
              <div class="name_button">{{ item.artists[0].name }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 专辑 -->
    </div>

    <!-- 视频 -->
    <div class="title">
      <div class="title_name">
        <h1>视频</h1>
        <span>显示全部</span>
      </div>
    </div>
    <!-- 视频 -->
    <div class="ship">
      <div class="max">
        <div v-for="item in mv" :key="item" class="geDan">
          <div class="imgs">
            <i class="iconfont icon-24gf-playCircle" />
            <img :src="item.cover">
          </div>
          <div class="introduce">
            <div class="name_top">{{ item.name }}</div>
            <div class="name_button">{{ item.artistName }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 歌单 -->
    <div class="title">
      <div class="title_name">
        <h1>歌单</h1>
        <span>显示全部</span>
      </div>
    </div>
    <div class="Songlist">
      <div class="max">
        <div v-for="item in songs" :key="item.id" class="geDan">
          <div class="imgs">
            <i class="iconfont icon-24gf-playCircle" />
            <img :src="item.coverImgUrl">
          </div>
          <div class="introduce">
            <div class="name_top">{{ item.name }}</div>
            <div class="name_button">{{ item.description }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 歌单 -->
  </div>
</template>
<script>
import { getSearchAll } from '@/api/Hompage/search.js'
export default {
  data() {
    return {
      src: 'https://p2.music.126.net/0L5drAV43FLJk6J9dRhfew==/109951165911947840.jpg?param=512y512',
      mvImg:
        'https://p1.music.126.net/ZeSeKA6hb3-mBs5G6ee9lw==/109951163093311146.jpg?param=464y260',
      // arr: this.$store.
      keywords: this.$route.params.search_text,
      Single: [],
      albums: [],
      singer: [],
      songs: [],
      mv: []
    }
  },
  computed: {
  },
  created() {
    this.getSearchAll()
  },
  methods: {
    async getSearchAll() {
      const a = await getSearchAll({
        limit: 16,
        type: 1,
        keywords: this.keywords
      })
      console.log(a)
      this.Single = a.data.result.songs

      const b = await getSearchAll({
        limit: 3,
        type: 10,
        keywords: this.keywords
      })
      console.log(b)
      this.albums = b.data.result.albums
      console.log(this.albums)

      const c = await getSearchAll({
        limit: 3,
        type: 100,
        keywords: this.keywords
      })
      console.log(c)
      this.singer = c.data.result.artists

      const d = await getSearchAll({
        limit: 16,
        type: 1000,
        keywords: this.keywords
      })
      console.log(d)
      this.songs = d.data.result.playlists

      const e = await getSearchAll({
        limit: 15,
        type: 1004,
        keywords: this.keywords
      })
      console.log(e)
      this.mv = e.data.result.mvs
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  span:hover {
    text-decoration: underline;
    cursor: pointer;
  }
  width: 100%;
  .box_top {
    display: flex;
    flex-wrap: wrap;
    margin-top: 32px;

    .artists {
      flex: 1;
      margin-right: 8rem;
      .section-title {
        font-weight: 600;
        font-size: 22px;
        opacity: 0.88;
        color: #000;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      span {
        font-size: 13px;
        font-weight: 600;
        opacity: 0.68;
      }
    }
    .left_max {
      display: flex;
      flex-wrap: wrap;
      .geDan {
        width: 33%;
        height: 220px;
        .imgs {
          border-radius: 50%;
          width: 150px;
          transition: all 0.1s;
          position: relative;
          height: 150px;
          overflow: hidden;
          i {
            display: none;
            font-size: 40px;
            position: absolute;
            top: 50%;
            left: 50%;
            color: rgba(192, 189, 189, 0.836);
            transform: translate(-50%, -50%);
            border-radius: 50%;
            padding: 0;
          }
          img {
            height: 150px;
          }
        }
        .imgs:hover {
          width: 150px;
          box-shadow: 2px 12px 13px #887f7f82;
        }
        .imgs:hover i {
          display: block;
        }
        .introduce {
          text-align: center;
          margin-top: 10px;
          .name_top {
            width: 150px;
            word-break: break-all;
            font-weight: 600;
            font-size: 16px;
            color: #000;
            height: 22px;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .name_top:hover {
            text-decoration: underline;
            cursor: pointer;
          }
          .name_button {
            width: 150px;
            font-size: 12px;
            height: 18px;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .albums {
      flex: 1;
      .section-title {
        font-weight: 600;
        font-size: 22px;
        opacity: 0.88;
        color: #000;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      span {
        font-size: 13px;
        font-weight: 600;
        opacity: 0.68;
      }
    }
    .right_max {
      display: flex;
      flex-wrap: wrap;
      .geDan {
        width: 33%;
        height: 220px;
        .imgs {
          width: 150px;
          transition: all 0.1s;
          position: relative;
          height: 150px;
          border-radius: 10px;
          overflow: hidden;
          i {
            display: none;
            font-size: 40px;
            position: absolute;
            top: 50%;
            left: 50%;
            color: rgba(192, 189, 189, 0.836);
            transform: translate(-50%, -50%);
            border-radius: 50%;
            padding: 0;
          }
          img {
            height: 150px;
          }
        }
        .imgs:hover {
          width: 150px;
          box-shadow: 2px 12px 13px #887f7f82;
        }
        .imgs:hover i {
          display: block;
        }
        .introduce {
          margin-top: 10px;
          .name_top {
            width: 150px;
            word-break: break-all;
            font-weight: 600;
            font-size: 16px;
            color: #000;
            height: 22px;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .name_top:hover {
            text-decoration: underline;
            cursor: pointer;
          }
          .name_button {
            width: 150px;
            font-size: 12px;
            word-break: break-word;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .title {
    display: flex;
    width: 100%;
    margin-top: 10px;
    .title_name {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      span {
        font-size: 13px;
        font-weight: 600;
        opacity: 0.68;
      }
    }
  }
  .ship {
    .max {
      display: flex;
      flex-wrap: wrap;
      .geDan {
        width: 20%;
        height: 220px;
        .imgs {
          width: 205px;
          transition: all 0.1s;
          position: relative;
          height: 150px;
          border-radius: 10px;
          overflow: hidden;
          i {
            display: none;
            font-size: 40px;
            position: absolute;
            top: 50%;
            left: 50%;
            color: rgba(192, 189, 189, 0.836);
            transform: translate(-50%, -50%);
            border-radius: 50%;
            padding: 0;
          }
          img {
            height: 150px;
          }
        }
        .imgs:hover {
          width: 205px;
          box-shadow: 2px 12px 13px #887f7f82;
        }
        .imgs:hover i {
          display: block;
        }
        .introduce {
          margin-top: 10px;
          .name_top {
            width: 150px;
            word-break: break-all;
            font-weight: 600;
            font-size: 16px;
            color: #000;
            height: 22px;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .name_top:hover {
            text-decoration: underline;
            cursor: pointer;
          }
          .name_button {
            width: 150px;
            font-size: 12px;
            word-break: break-word;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .Songlist {
    .max {
      display: flex;
      flex-wrap: wrap;
      .geDan {
        width: 16%;
        height: 220px;
        .imgs {
          width: 150px;
          transition: all 0.1s;
          position: relative;
          height: 150px;
          border-radius: 10px;
          overflow: hidden;
          i {
            display: none;
            font-size: 40px;
            position: absolute;
            top: 50%;
            left: 50%;
            color: rgba(192, 189, 189, 0.836);
            transform: translate(-50%, -50%);
            border-radius: 50%;
            padding: 0;
          }
          img {
            height: 150px;
          }
        }
        .imgs:hover {
          width: 150px;
          box-shadow: 2px 12px 13px #887f7f82;
        }
        .imgs:hover i {
          display: block;
        }
        .introduce {
          margin-top: 10px;
          .name_top {
            width: 150px;
            word-break: break-all;
            font-weight: 600;
            font-size: 16px;
            color: #000;
            height: 22px;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
             white-space: nowrap;
          }
          .name_top:hover {
            text-decoration: underline;
            cursor: pointer;
          }
          .name_button {
            width: 150px;
            font-size: 12px;
            height: 18px;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
